<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 卡片 -->
      <el-card class="tree-card">
        <!-- 第一行 -->
        <tree-tools
          :tree-node="company"
          :is-root="true"
          style="height: 40px; font-size: 14px"
          @addDept="addDept"
        />
        <!-- 树形菜单 -->
        <el-tree
          :data="departs"
          :props="defaultProps"
          @node-click="handleNodeClick"
        >
          <tree-tools
            slot-scope="{ data }"
            :tree-node="data"
            @delDept="getDepartments"
            @addDept="addDept"
            @editDept="editDept"
          >
            <!-- <el-dropdown-item
              command="add"
              @click.native="addDept(data)"
            >添加子部门</el-dropdown-item>
            <el-dropdown-item>编辑子部门</el-dropdown-item>
            <el-dropdown-item
              @click.native="handleDel(data.id)"
            >删除子部门</el-dropdown-item> -->
          </tree-tools>
        </el-tree>
      </el-card>
    </div>
    <!-- 弹窗组件 -->
    <add-dept
      ref="addDept"
      :show-dialog.sync="showDialog"
      :tree-node="node"
      @addDeptSuccess="getDepartments"
    />
    <!-- <el-dialog title="新增部门" :visible="showDialog" @close="showDialog = false">
      <add-dept v-if="showDialog" />
    </el-dialog> -->
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import { delDepartments, getDepartmentDetail, getDepartments } from '@/api/departments.js'
import { tranListToTreeData } from '@/utils'
import AddDept from './components/add-dept'
export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      company: { name: '江苏传智播客教育科技股份有限公司', manager: '负责人' },
      departs: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      node: {},
      showDialog: false
    }
  },
  created() {
    this.getDepartments()
  },
  mounted() {},
  methods: {
    handleNodeClick() {},
    // 获取数据 渲染树形结构
    async getDepartments() {
      const data = await getDepartments()
      // console.log(data)
      this.company.id = ''
      this.company.name = data.companyName
      this.departs = tranListToTreeData(data.depts)
    },
    // 删除操作(方式1)
    handleDel(id) {
      this.$confirm('确认删除吗？', '系统提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async action => {
        // 调用删除 接口
        await delDepartments(id)
        this.$message({
          message: '删除成功！',
          type: 'success',
          showClose: true,
          duration: 3000
        })
        // 刷新页面
        this.getDepartments()
      }).catch((err) => {
        console.log(err)
      })
    },
    // 添加操作
    addDept(node) {
      this.node = node
      this.showDialog = true
    },
    // 编辑操作
    async editDept(node) {
      this.node = node
      this.showDialog = true
      // 编辑弹出层中 将数据填充到表单中
      this.$refs.addDept.formData = await getDepartmentDetail(node.id)
      // this.$refs.addDept.getDepartmentDetail(node.id) // 方式二
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
